<template>
  <div class="bg-gray">
    <b-container>
      <!--      main-->
      <b-row class="mt-3">

        <!--      //card-->
        <b-col cols="12" md="6" class="mb-3">
          <div class="my-card py-3">
            <b-row class="mx-1">
              <b-col cols="4" class="text-center px-0">
                <b-avatar
                    :src="uavatarpath"
                    size="100px"
                    :variant="user.avatarcolor"
                    class="mt-1"
                ></b-avatar>
              </b-col>
              <b-col cols="8" class="pr-3 pl-0">
                <div>
                  <b-img :src="rankImgSrc" height="30px" width="30px" right></b-img>
                  <h5 class="mb-1 text-overflow "> {{user.nickname}}</h5>
                  <p class="mb-0">积分：{{user.rank}}</p>
                  <p class="mt-1 mb-0">个人简介：{{user.description}}</p>
                </div>
              </b-col>
            </b-row>
          </div>
        </b-col>
        <b-col cols="12" md="6" class="mb-3" v-for="(item,index) in filterItems">
          <div class="my-card py-3">
            <b-row class="mx-1" @click="gotoitem(item)">
              <b-col cols="4" class="text-center px-0">
                <b-img :src="gensrc(item)" fluid-grow/>
              </b-col>
              <b-col cols="8">
                <h5>{{item.title}}</h5>
                <p>{{item.description}}</p>
              </b-col>
              <b-col cols="12">
                <h5 class="color-number font-weight-bold">￥{{item.price}}</h5>
              </b-col>
            </b-row>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
  import urlconfig from "../urlconfig";

  export default {
    name: "User",
    data() {
      return {
        rank1f: require("../assets/rank1-f.svg"),
        rank1: require('../assets/rank1.svg'),
        rank2: require('../assets/rank2.svg'),
        rank3: require('../assets/rank3.svg'),
        user: '',
        items: [],
      }
    },
    methods: {
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      init() {
        this.$ajax.post('/item/listitems', {uuid: this.$route.params.uuid, level: 2}).then(resp => {
          let data = resp.data
          if (data.code === 200) {
            this.user = data.data.userinfo
            this.items = data.data.items
          } else {
            this.makeToast(data.msg, false)
          }
        }).catch(err => {
          this.makeToast('请求失败', false)
        })
      },
      gensrc(item) {
        return urlconfig.baseUrl + urlconfig.fileResources + item.files[0].filename
      },
      gotoitem(item) {
        this.$router.push('/item/' + item.itemid)
      }
    },
    computed: {
      rankImgSrc() {
        if (this.$store.state.rank < 100) {
          return this.rank1f
        } else if (this.$store.state.rank < 200) {
          return this.rank1
        } else if (this.$store.state.rank < 1000) {
          return this.rank2
        } else {
          return this.rank3
        }
      },
      uavatarpath() {
        if (this.user) {
          return urlconfig.baseUrl + urlconfig.avatarResource + this.user.avatarpath
        }
      },
      filterItems() {
        return this.items.filter(item => item.status === 1)
      }
    },
    mounted() {
      this.init()
    }

  }
</script>

<style scoped>
  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }

  .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

</style>